import { loginAPI } from "@/api/user"
import { getToken, removeToken, setToken } from "@/utils/auth"

export default {
  // 命名空间，使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
  namespaced: true,
  // 模块内的state写法 推荐是函数写法
  state: {
    token: getToken() || ''
  },
  mutations: {
    // mytations中的方法 只有一种调用方式 store.commite('mutations中的方法名') 并没有方法名()这种调用方式
    setToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    removeToken(state) {
      // 清空vuex中的token
      state.token = ''
      // 清空cookie中的token
      removeToken()
    }
  },
  actions: {
    async loginAction(store, data) {
      const res = await loginAPI(data)
      store.commit('setToken', res.data.token)

    }
  },
  getters: {

  },

}


// 使用语法:如何在组件中使用子模块的各个数据和方法
// 1.使用state中的数据
// 使用场景:如果组件中只有一处用了state中的数据,可以$store直接方法
// 如果组件中有多出使用了state中的数据,可以使用辅助函数
// this.$store.state.user.xxx
/*
辅助方法使用
import {mapState} from 'vuex'
computed:{
  ...mapState('模块名',['属性名1','属性名2',....])
}
 */

// 2.使用getters中的数据
// this.$store.getters['user/getters方法名']
/*
import{mapGetter} from 'vuex'
computed:{
...mapGetters('模块名',['getters中方法名1',....])
}
 */

// 3.使用mutations的方法
// this.$store.commit('模块名/方法名',参数) 参数只能传一个
/*
import {mapMutations} from 'vuex'
methods:{
...mapMutations('模块名',['方法名1'])
}
 */

// 4.使用actions的方法
// this.$store.dispatch('模块名/方法名',参数) 参数只能传递一个
/*
 import {mapActions} from 'vuex'
 methods:{
 ...mapActions('模块名',['方法名1'])
 }
 */